<template>
  <div>
    <a-table
      rowKey="index"
      bordered
      size="small"
      :dataSource="props.dataSource"
      :columns="roadmapColumns"
      :pagination="false"
      class="form-table"
      :scroll="{ y: 300 }"
    >
      <template #bodyCell="{ column, text, index }">
        <template v-if="column.key === 'sort'">
          <div class="table-angle-container">
            <div
              :class="{
                'table-angle-bg':
                  index == 0 || index == props.dataSource.length - 1,
              }"
            ></div>
            <div class="table-angle-text" v-if="index == 0">{{ $t('other.theFirstOne') }}</div>
            <div
              class="table-angle-text"
              v-if="index != 0 && index == props.dataSource.length - 1"
            >{{ $t('other.theLast') }}
            </div>
            {{ text }}
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup name="roadmapTable">
import { roadmapColumns } from "./wipConfig";
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
});
</script>
